<template>
  <div class="history">
      <van-nav-bar title="浏览历史" left-text="返回"  left-arrow @click-left="onClickLeft" @click-right="onClickRight"/>
      <div class="showProHistory">
        <div class="index_provide_buy">
          <keep-alive>
            <van-tabs v-model:active="active">
            <!-- 最新供应信息 -->
              <van-tab :title="provideTitle" name="sellTag"> <!--providelist -->
                <div class="index_provideinof" v-for="(item,index) in providelist" :key="index" >
                  <!-- <template v-if="proAllNum>index"> -->
                    <div class="myprovideinof">
                      <!-- <img :src="item.imgUrl[0]" alt=""> -->
                      <!-- <h3>{{item.title}}</h3>
                      <p>{{item.production}}</p>
                      <p><i v-for="(it,index) in item.requirement" :key="index">{{obj[it]}}</i></p>
                      <p><i>{{item.unitPrice}}</i>元/斤</p> -->
                      <p style="width:100%;text-align:center;height:38px;line-height:38px;color:black">{{item}}</p>
                    </div>
                  <!-- </template> -->
                </div>
                <div class="getMoreList" style="font-size:14px">
                  <!-- <i @click="getMorePro" v-if="providelist.length>proAllNum">点击加载更多</i> -->
                  <!-- <i v-else>到底啦~</i> -->
                  <i>到底啦~</i>
                </div>
              </van-tab>
               <!-- 最新采购信息 -->
              <van-tab :title="buyTitle" name="buyTag"  class="index_buy">
                <template v-for="(item,index) in buylist">
                  <div class="index_buyinof"  :key=item._id v-if="buyAllNum>index">
                    <p><i>采购</i>{{item.title}}</p>
                    <p>期望产地:{{item.production}}</p>
                    <p>品质要求:<i v-for="(it,index) in item.requirement" :key="index">{{quality[it]}}</i></p>
                    <p>{{item.production}}<i v-for="(it,index) in item.requirement" :key="index">{{obj[it]}}</i></p>
                    <p>2000斤</p>
                  </div>
                </template>
                <div class="getMoreList" style="font-size:14px">
                  <i @click="getMoreBuy" v-if="buylist.length>buyAllNum">点击加载更多</i>
                  <i v-else>到底啦~</i>
                </div>
              </van-tab>
            </van-tabs>
          </keep-alive>
        </div>
      </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref,computed,onMounted } from 'vue';
import {getHistoryApi} from "../utils/api.js";
export default {

  setup(){
      const router = useRouter();
       const provideTitle=ref("最新供应信息");
      const buyTitle=ref("最新采购信息");
      //商品信息
      const obj = ref({
        1: '企业认证',
        2: '实名认证'
      })
      const quality=ref({
        1: "纯天然", 
        2: "无添加", 
        3: "保质保量"
      })
      //切换tab 默认为第一个
      const active = ref(0);
      //全部的供应列表数据
      const providelist=ref({});
      //全部的采购列表数据
      const buylist=ref({});
      //数量
      const proAllNum=ref(2);
      const buyAllNum=ref(2);
      //获取采购和供应数据
      const getList=async ()=>{
        const tempsell=await getHistoryApi({token:localStorage.getItem("userToken")});
        providelist.value=tempsell.result;
        console.log(providelist.value,tempsell.result);
        // name="buyTag";
        // const tempbuy=await getHistoryApi({token:localStorage.getItem("userToken")});
        // buylist.value=tempbuy.result;
      }
      onMounted(()=>{
        getList();
      });
      //点击加载
      // const getMorePro=()=>{
      //   proAllNum.value+=2;
      // }
      const getMoreBuy=()=>{
        buyAllNum.value+=2;
      }
      const onClickLeft=()=>{
        router.push("/home/mine")
      }
      return { provideTitle,buyTitle,active,getList,providelist,buylist,obj,quality,proAllNum,buyAllNum,getMoreBuy,onClickLeft};
      
  }
  
};
</script>
<style lang="scss">
    .history{
        position:fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow-y: auto;
    }
</style>
